import React from 'react';
import ReactDOM from 'react-dom';
import {Tabs, Button, Spin, Icon, message, Modal,Checkbox} from 'antd';
const TabPane = Tabs.TabPane;



import {WeaUpload,WeaBrowser,WeaHelpfulTip,WeaDialog,WeaLocaleProvider,WeaTools, WeaSearchGroup, WeaFormItem,WeaInput,WeaNewScroll,WeaSelectGroup,WeaTable,WeaInputNumber,WeaColorPicker,WeaSelect,WeaCheckbox} from 'ecCom'
const getLabel = WeaLocaleProvider.getLabel;
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';
import './style/index';


class ManagerSetting extends React.Component {


    componentWillReceiveProps(nextProps){
        let styles = []
        let newStyle = nextProps.container.newStyle
        styles = (newStyle+"").split(",")

        let width = 0
        let height = 0
        let customApplicationSize = nextProps.container.customApplicationSize
        // if(nextProps.container.customApplicationSizeType==0){
        //     let temp = nextProps.container.customApplicationSize.split("*")
        //     if(temp.length ==2){
        //         width = temp[0]
        //         height = temp[1]
        //     }
        //     customApplicationSize = 0
        //
        //
        // }
        let temp = nextProps.container.customApplicationSize.split("*")
        if(temp.length ==2){
            width = temp[0]
            height = temp[1]
        }
        customApplicationSize = 0

        this.setState({
            customApplicationSizeType: nextProps.container.customApplicationSizeType,
            customApplicationSize:customApplicationSize,
            width:width,
            height:height,
            openPageHelper:nextProps.container.openPageHelper,
            pageSize:nextProps.container.pageSize,
            addOption:nextProps.container.addOption,
            sortOption:nextProps.container.sortOption,
            isAsynSystemSetting : "0",
            containerLR:styles[0],
            containerTB:styles[1],
            applicationLR:styles[2],
            applicationTB:styles[3],
            containerRadius:styles[4],
            applicationDivRadius:styles[5],
            applicationFontColor:styles[6],
            containerBgi:styles[7],
            applicationLogoRadius:styles[8],
            logoTextMargin:styles[9],
            setting:nextProps.container.setting
        })

    }



    constructor(props){
        super(props)
        const initialDatas = this.props.container.data
        this.state = {
            loading: false,
            ctrlHeight:220,
            scrollTop:0,
            customApplicationSizeType:'1',
            customApplicationSize:"22",
            width:"",
            height:"",
            openPageHelper:"",
            pageSize:"",
            addOption:"1",
            sortOption:"1",
            isAsynSystemSetting : "0",
            selectedRowKeys:[],
            selectedRowIds : [],
            containerLR:'',
            containerTB:'',
            applicationLR:'',
            applicationTB:'',
            containerRadius:'',
            applicationDivRadius:'',
            applicationLogoRadius:'',
            applicationFontColor:'',
            containerBgi:'',
            logoTextMargin:'',
            setting:{}

                /*title: "",
                columns:[
                    {
                        title: <span>名称</span>,
                        dataIndex: 'text',
                        key: 'text',
                        com: [
                            {
                                type: 'CUSTOM',
                                key: 'customrender',
                                render: (text, record, index, onEdit) => (
                                    record.text
                                )
                            }
                        ],
                    },  {
                        title: <span>图标</span>,
                        dataIndex: 'logo',
                        key: 'logo',
                        com: [
                            {
                                type: 'CUSTOM',
                                key: 'customrender',
                                render: (text, record, index, onEdit) => (
                                    record.logo
                                )
                            }
                        ],
                    },  {
                        title: <span>背景色</span>,
                        dataIndex: 'bgc',
                        key: 'bgc',
                        com: [
                            {
                                type: 'CUSTOM',
                                key: 'customrender',
                                render: (text, record, index, onEdit) => (
                                   record.bgc
                                )
                            }
                        ],
                    },  {
                        title:  <span>链接地址类型</span>,
                        dataIndex: 'urlType',
                        key: 'urlType',
                        com: [
                            {
                                type: 'CUSTOM',
                                key: 'customrender',
                                render: (text, record, index, onEdit) => (
                                    record.urlType
                                )
                            }
                        ],
                    }, {
                        title: <span>链接地址</span>,
                        dataIndex: 'url',
                        key: 'url',
                        com: [
                            {
                                type: 'CUSTOM',
                                key: 'customrender',
                                render: (text, record, index, onEdit) => (
                                    record.url
                                )
                            }
                        ],
                    },
                ],
                initialDatas,
                datas:initialDatas,
                selectedRowKeys:[],
                cells:[],
                validator:{},
                draggable: true,
                draggableType: 'icon',
                showTitle: true,
                showAdd: true,
                showDelete: true,
                showCopy: true,
                showMove: true,
                showCollapse: true,
                buttonsType: 'inline',
                validatePass: '',
                addButtonType: 'normal',
                pushTitleIntoHeader: false,
                showRowSelect: true,*/


        }
    }

   /* onRowSelect = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    }
    willAdd = (datas, addData) => {
        return datas.map(data => {
            if (addData.id === data.id) return { ...data, input: 'add'};
            return data;
        })
    }

    willDelete = (datas, keys) => new Promise((resolve, reject) => {
        confirm({
            content: `确认删除 id 为 ${keys}的数据行吗? `,
            onOk: () => resolve(true),
            onCancel: () => resolve(false),
        })
    })

    getRowSelection = rowSelection => {
        const sel = { ...rowSelection };
        sel.getCheckboxProps = record => {
            return { disabled: record.id === '1' };
        };
        return this.state.showRowSelect ? sel : null;
    }
    getTableProps = () => {
        return {
            scroll: { x: 3000 },
            showEmptyText: false,
            onRowClick: (...arg) => console.log('---- onRowClick: ', ...arg),
            onRowHover: (...arg) => console.log('---- onRowHover: ', ...arg),
            onRowMouseEnter: (...arg) => console.log('---- onRowMouseEnter:', ...arg),
            onRowMouseLeave: (...arg) => console.log('---- onRowMouseLeave:', ...arg),
        }
    }
    getAddDropDatas() {
        const datas = [1, 2, 3].map(key => (
            {
                key,
                show: `增加${key}`,
                disabled: key === 3,
            }
        ))
        return {
            datas,
            onMenuClick: key => console.log(key),
        };
    }

    /!* ======================= 移动到组数据 ======================= *!/
    getMoveDropDatas() {
        const datas = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(key => (
            {
                key,
                show: `测试组${key}`,
                disabled: key === 4,
            }
        ))
        return {
            addBtn: {
                show: '新建分组并移动',
                onClick: () => console.log('点击新建分组并移动'),
            },
            datas,
            onMenuClick: key => console.log(key),
        };
    }
    willCopy = (datas, selectedKeys, copyDatas) => {
        return datas.map(data => {
            if (copyDatas.some(c => c.id === data.id)) return { id: data.id };
            return data;
        })
    }
    onChange = (datas, other) => {
        console.log('datas, other: ', datas, other);
        // datas 为最新数据，一般做同步受控使用，other 为分类数据，比如那些 新增、删除、修改的变化， initialDatas 正确时这里的数据才可用
        this.setState({ datas });
    }


    /!* ======================= 编辑事件钩子 ======================= *!/
    // 在单元格发生编辑，即将更新数据时的钩子。抛出最新的 datas, 返回修改后的 datas, 可以是异步的 Promise
    // 本例子，在 id 为 1的行 checkbox 变化时，更新 input 类型为显示文本，并改变其值为 'edit'
    willEdit = (datas, result) => {
        const { key, record } = result;
        if (key === 'checkbox' && record.id === '1') {
            return datas.map(data => {
                if (data.id === record.id) {
                    this.setState({
                        cells: this.state.cells.concat([{
                            id: '1',
                            input: {
                                com: [{ type: 'TEXT', key: 'input'}]
                            }
                        }])
                    })
                    return {
                        ...data,
                        input: 'edit',
                    };
                }
                return data;
            });
        }
        return datas;
    }*/

    getCols = ()=>{
        let cols = [{
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: "20%",
        },{
            title: '链接地址类型',
            dataIndex: 'urltype',
            key: 'urltype',
            width: "20%",
        },{
            title: '启用',
            dataIndex: 'showOrHide',
            key: 'showOrHide',
            width: "20%",
            render: (text,record) =>(
               <span>
                    {
                        record.isAddModule == '1' ? (
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@nisuhp@${record.id}`}
                                value={text}
                                disabled
                            />
                        ): (
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@bpnhq6@${record.id}`}
                                value={text}
                                onChange={(value) => {
                                    let data4Setting = this.props.container.data4Setting
                                    data4Setting.find((item)=>item.id == record.id).showOrHide = value
                                    this.props.setStateData({data4Setting})
                                }}
                            />
                        )
                    }
               </span>

            )
        },{
            title: getLabel(30585, '操作'),
            key: 'operation',
            width: "40%",
            render: (text, record) => (
                <span>
                    <input type="hidden" name="id" value={record.id}/>
                    {
                        this.props.container.isSystem == 1 ? (
                            <div>
                                <span className="esetting-dso-button" onClick={()=>{this.props.setAddVisiableAndEditItem(record.index)}}>{getLabel(	30747, '设置')}</span>
                                <WeaPortalShare ecId={`${this && this.props && this.props.ecId || ''}_WeaPortalShare@x0n2bh@${record.id}`} title="共享范围" type={{app: record.id,element:this.props.container.id}}> <span className="esetting-dso-button" >共享</span></WeaPortalShare>

                            </div>

                        ):(
                            record.createBySystem==0? <span className="esetting-dso-button" onClick={()=>{this.props.setAddVisiableAndEditItem(record.index)}}>{getLabel(	30747, '设置')}</span>:""
                        )
                    }

                </span>
            )
        }]
        return cols;
    }

    getData = ()=>{
        const data = this.props.container.data4Setting
        let realData = []
        for(let i = 0 ;i< data.length ; i++){
            realData.push({
                key:data[i].id,
                index:parseInt(i),
                id: data[i].id,
                name: data[i].text,
                icon: data[i].logo,
                color: data[i].bgc,
                urltype:  data[i].urlType==1?"系统菜单":'自定义URL',
                linkurl:  data[i].url,
                openmode:  data[i].openmode,
                counturl:  data[i].counturl,
                status:  data[i].status,
                createBySystem:data[i].createBySystem,
                showOrHide:data[i].showOrHide,
                isAddModule: data[i].isAddModule
            })
        }
        return realData
    }

    getShareData = ()=>{
        let shareData = {}
        //获取共享数据
        shareData = {eShare:{
                eHasShareRight:true,
                eShareList:[]
            }}
        this.props.setStateData({
            shareData,
            shareVisible:true
        })

    }

    save = (isAsynSystemSetting)=>{
        let {addOption,sortOption,customApplicationSizeType,customApplicationSize,width,height,openPageHelper,pageSize,containerLR,containerTB,applicationLR,applicationTB,containerRadius,applicationDivRadius,applicationFontColor,containerBgi,applicationLogoRadius,logoTextMargin,setting} = this.state
        if(!pageSize){
            pageSize = 1
        }
        // if(customApplicationSizeType==0){
        //     customApplicationSize = width +"*"+  height
        // }
        customApplicationSize = width +"*"+  height
        let newStyle = containerLR
        newStyle += ","+containerTB
        newStyle += ","+applicationLR
        newStyle += ","+applicationTB
        newStyle += ","+containerRadius
        newStyle += ","+applicationDivRadius
        newStyle += ","+applicationFontColor
        newStyle += ","+containerBgi
        newStyle += ","+applicationLogoRadius
        newStyle += ","+logoTextMargin
        this.props.setStateData({
            customApplicationSizeType,
            customApplicationSize,
            openPageHelper,
            pageSize,
            newStyle,
            addOption,
            sortOption,
            setting,
        })
        if(isAsynSystemSetting == 1){
            this.props.saveManagerSetting(1)
        }else if(isAsynSystemSetting == 0){
            this.props.saveManagerSetting(0)
        }
        this.setState({
            isAsynSystemSetting:0
        })


    }
    drop = (items=[])=>{
        let ids = []
        let data = []
        for(let id = 0 ;id<items.length ; id++){
            ids.push(items[id].id)
            // data.push(this.props.container.data[items[id].index])
        }
        this.props.setStateData({sortIds:ids})
    }

    onSelectChange = (selectedRowKeys, selectedRows)=>{
        let srks = []
        for(let i=0 ;i < selectedRows.length ;i++){
            srks.push(selectedRows[i].id)
        }
        this.setState({
            selectedRowIds:srks,
            selectedRowKeys:selectedRowKeys
        })
    }
    deleteIds = ()=>{
        if(this.state.selectedRowKeys.length >0){
            Modal.confirm({
                title: getLabel(15172, '系统提示'),
                content: getLabel(385625, '确定要删除选择的记录吗？'),
                onOk: () => {
                    let {selectedRowIds} = this.state
                    let data = this.props.container.data4Setting;
                    let realData =[]
                    for(let i=0 ;i < data.length ;i++){
                        let k = 0
                        for(let j =0 ; j< selectedRowIds.length ;j++){
                            if(data[i].id===selectedRowIds[j]){
                                k =1
                            }
                        }
                        if(k==0){
                            realData.push(data[i])
                        }
                    }
                    this.props.setStateData({
                        data4Setting : realData,
                        deleteIds:selectedRowIds
                    })
                    this.setState({selectedRowKeys:[]})
                },
            });
        }
    }

    handlerDialogCancle = ()=>{
        this.props.setStateData({sortIds:[]})
        this.props.setStateData({managerSettingVisible:false})
        this.props.getAllData()
    }

    render(){
        const {loading,scrollTop,ctrlHeight,containerLR,containerTB,applicationLR,applicationTB,containerRadius,applicationDivRadius,applicationFontColor,containerBgi,applicationLogoRadius,logoTextMargin,setting} = this.state;

        const showTypeOptions = [
            {key:'0',showname:'方式1'},
            {key:'1',showname:'方式2'}
        ]

        const selectLinkageDatas = {
            '0': {
                conditionType: 'INPUT',
                domkey: ['INPUT'],
            },
            '1': {
                conditionType: 'INPUT',
                domkey: ['INPUT'],
            }

        }
        const options = [
            {key:'0',showname:'固定像素', selected: true},
            {key:'1',showname:'百分比'},

        ]

        const componentSizeOptions = [
            {
                key: "0",
                selected: true,
                showname: "固定像素",
            },{
                key: "1",
                showname: "百分比",
            },
        ]



        let value = []
        value.push(this.state.customApplicationSizeType);
        let valueValue = []
        valueValue.push(this.state.customApplicationSize)
        value.push(valueValue)

        const selectLinkageDatas2 = {

            '1': {
                conditionType: 'INPUT',
                domkey: ['INPUT'],
            }

        }
        const options2 = [
            {key:'0',showname:'不开启分页', selected: true},
            {key:'1',showname:'开启分页'},

        ]
        let value2 = []
        value2.push(this.state.openPageHelper);
        let valueValue2 = []
        valueValue2.push(this.state.pageSize)
        value2.push(valueValue2)
        let cols =this.getCols()
        let data = this.getData()

        // const data = [{key:0,name:'0',"urltype":'0'},{key:1,name:'1',"urltype":'1'},{key:2,name:'2',"urltype":'2'}]

        const rowSelection = {
            selectedRowKeys : this.state.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: (record)=>{
                return {
                    disabled: (record.createBySystem == 1 && this.props.container.isSystem==0)    // 配置无法勾选的列
                };
            }
        };
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@mw0fvz`}
                title="应用设置"
                visible={this.props.container.managerSettingVisible}
                iconBgcolor='#1a57a0'
                hasScroll={false}
                draggable={false}
                style={{width: 900,height : 500}}
                onCancel={this.handlerDialogCancle}
            >
                {
                    this.props.container.managerSettingVisible ? (
                        <div className="portal-esetting-container lr_managerSetting_out_div" >
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5z2wwk`} spinning={false}>
                                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@lu6ctf`} defaultActiveKey="1" className="portal-esetting-tabs" onChange={()=>{}}>
                                    <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@sajh3h`} tab={getLabel(33368, '内容')} key="1">
                                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@5z8tuf`} height={396}>
                                            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@i12z3r`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                                                {
                                                    this.props.container.isSystem == 1?(<div className="lr_managerSetting_center_out_div">
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8yphxg`} label="允许用户添加" labelCol={{span: 3}} wrapperCol={{span: 18}}>
                                                            <div className="lr_managerSetting_center_permitAdd_div" >
                                                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@atjhp7`}
                                                                    value={this.state.addOption}
                                                                    display="switch"
                                                                    onChange={(value) => {
                                                                        if(value ==="1"){
                                                                            this.setState({
                                                                                addOption:1,
                                                                            })
                                                                        }else{
                                                                            this.setState({
                                                                                addOption:0,
                                                                            })
                                                                        }
                                                                    }}
                                                                />
                                                            </div>
                                                            <span>允许用户排序:</span>
                                                            <div className="lr_managerSetting_center_permitAdd_div">
                                                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@nmn7zn`}
                                                                    value={this.state.sortOption}
                                                                    display="switch"
                                                                    onChange={(value) => {
                                                                        if(value ==="1"){
                                                                            this.setState({
                                                                                sortOption:1,
                                                                            })
                                                                        }else{
                                                                            this.setState({
                                                                                sortOption:0,
                                                                            })
                                                                        }
                                                                    }}
                                                                />
                                                            </div>
                                                            <span>同步:</span>
                                                            <div className="lr_managerSetting_center_permitAdd_div">
                                                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@o7a8vf`}
                                                                    value={this.state.isAsynSystemSetting}
                                                                    display="switch"
                                                                    onChange={(value) => {
                                                                        if(value ==="1"){
                                                                            this.setState({
                                                                                isAsynSystemSetting:1,
                                                                            })
                                                                        }else{
                                                                            this.setState({
                                                                                isAsynSystemSetting:0,
                                                                            })
                                                                        }
                                                                    }}
                                                                />
                                                            </div>
                                                        </WeaFormItem>
                                                    </div>):""
                                                }
                                            </WeaSearchGroup>



                                            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@907dl1`} title={getLabel(20885, '内容来源')} needTigger={true} showGroup={true} customComponent={

                                                this.props.container.isSystem == 1 ?
                                                    (<div>
                                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@br2z6i`} type="primary"  onClick={this.props.addCustomeApplicationExample} >
                                                            添加
                                                        </Button>
                                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3tb0vg`} type={this.state.selectedRowKeys.length >0 ?"primary":"ghost"} className="lr_managerSetting_center_delete_button"  onClick={() => {this.deleteIds()}} >批量删除</Button>
                                                    </div>):(this.state.addOption==1?(<div>
                                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@24cp60`} type="primary"  onClick={this.props.addCustomeApplicationExample} >
                                                            添加
                                                        </Button>
                                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ej56ha`} type={this.state.selectedRowKeys.length >0 ?"primary":"ghost"}  className="lr_managerSetting_center_delete_button"  onClick={() => {this.deleteIds()}} >批量删除</Button>
                                                    </div>):"")


                                            }>
                                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7gdmgm`}
                                                    height={ctrlHeight}
                                                    onScroll={(e)=>{
                                                        this.setState({
                                                            scrollTop:e.target.scrollTop,
                                                        })
                                                    }}>
                                                    {
                                                        this.props.container.isSystem == 1 ?
                                                            (<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@i4vt66`}  rowSelection={rowSelection} columns={cols} dataSource={data} draggable={true} onDrop={this.drop}  pagination={false}/>):
                                                            (this.state.sortOption==1?(<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hn0drx`}  rowSelection={rowSelection} columns={cols} dataSource={data} draggable={true} onDrop={this.drop} pagination={false}/>):
                                                                (<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@phyza0`}  rowSelection={rowSelection} columns={cols} dataSource={data} draggable={false} onDrop={this.drop} pagination={false}/>))
                                                    }

                                                </WeaNewScroll>
                                            </WeaSearchGroup>
                                        </WeaNewScroll>

                                    </TabPane>


                                    {
                                        this.props.container.isSystem == 1 ?<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@n1ogh7`} tab="样式" key="2">
                                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ut6p9j`} height={396}>
                                                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@jp20x9`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true} >
                                                    <div className="lr_managerSetting_style_base_div" >
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ams7e8`} label="边距" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                                            <span>左右边距:</span>
                                                            <div className="lr_managerSetting_style_base_input">
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@drmry4`}
                                                                    value = {containerLR}
                                                                    onChange = {(value)=>{this.setState({containerLR:value})}}
                                                                />
                                                            </div>
                                                            <span>上下边距:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@lfejvu`}
                                                                    value = {containerTB}
                                                                    onChange = {(value)=>{this.setState({containerTB:value})}}
                                                                />
                                                            </div>
                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@whplxs`} label="间距" labelCol={{span: 6}} wrapperCol={{span: 18}}>
                                                            <span>左右间距:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@gnqm2q`}
                                                                    value = {applicationLR}
                                                                    onChange = {(value)=>{this.setState({applicationLR:value})}}
                                                                />
                                                            </div>
                                                            <span>上下间距:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@rvhpgy`}
                                                                    value = {applicationTB}
                                                                    onChange = {(value)=>{this.setState({applicationTB:value})}}
                                                                />
                                                            </div>
                                                        </WeaFormItem>

                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@g1pvg1`} label="圆角" labelCol={{span: 6}} wrapperCol={{span: 18}} >

                                                            <span>容器圆角:</span>
                                                            <div className="lr_managerSetting_style_base_input">
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@7zcniw`}
                                                                    value = {containerRadius}
                                                                    onChange = {(value)=>{this.setState({containerRadius:value})}}
                                                                />
                                                            </div>

                                                            <span>应用圆角:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@o7o4rn`}
                                                                    value = {applicationDivRadius}
                                                                    onChange = {(value)=>{this.setState({applicationDivRadius:value})}}
                                                                />
                                                            </div>
                                                            <span>图标圆角:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@xlgi75`}
                                                                    value = {applicationLogoRadius}
                                                                    onChange = {(value)=>{this.setState({applicationLogoRadius:value})}}
                                                                />
                                                            </div>
                                                            <div style={{'margin-top':"5px"}}></div>
                                                            <span>未读边框圆角:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@uorwoq`}
                                                                    value = {setting.unreadCountRadius}
                                                                    onChange = {(value)=>{this.setState({ setting: Object.assign({},setting,{unreadCountRadius:value})})}}
                                                                />
                                                            </div>
                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ybkqgz`} label="字体大小" labelCol={{span: 6}} wrapperCol={{span: 18}} >

                                                            <span>名称大小:</span>
                                                            <div className="lr_managerSetting_style_base_input">
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@33vfj4`}
                                                                    value = {setting.titleFontSize}
                                                                    onChange = {(value)=>{this.setState({setting:Object.assign({},setting,{titleFontSize:value})})}}
                                                                />
                                                            </div>

                                                            <span>未读提示:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@55sxss`}
                                                                    value = {setting.noReadTitleFontSize}
                                                                    onChange = {(value)=>{this.setState({setting:Object.assign({},setting,{noReadTitleFontSize:value})})}}
                                                                />
                                                            </div>
                                                            <span>未读数量:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@u41k87`}
                                                                    value = {setting.noReadCountFontSize}
                                                                    onChange = {(value)=>{this.setState({setting:Object.assign({},setting,{noReadCountFontSize:value})})}}
                                                                />
                                                            </div>
                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ce996r`} label="未读数" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                                            <span style={{'margin-right':'10px'}}>未读数位置:</span>
                                                            <span>左:</span>
                                                            <div className="lr_managerSetting_style_base_input">
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@sdjd9p`}
                                                                    value = {setting.unreadPositionLeft}
                                                                    onChange={v => {
                                                                        this.setState({ setting: Object.assign({},setting,{unreadPositionLeft:v})});
                                                                    }}
                                                                />
                                                            </div>
                                                            <span>上:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@dm8vf6`}
                                                                    value = {setting.unreadPositionTop}
                                                                    onChange={v => {
                                                                        this.setState({ setting: Object.assign({},setting,{unreadPositionTop:v})});
                                                                    }}
                                                                />
                                                            </div>
                                                            <div style={{'margin-top':"5px"}}></div>
                                                            <span style={{'margin-right':'10px'}}>未读数宽高:</span>
                                                            <span>宽:</span>
                                                            <div className="lr_managerSetting_style_base_input">
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ef377i`}
                                                                    value = {setting.unreadWidth}
                                                                    onChange={v => {
                                                                        this.setState({ setting: Object.assign({},setting,{unreadWidth:v})});
                                                                    }}
                                                                />
                                                            </div>
                                                            <span>高:</span>
                                                            <div className="lr_managerSetting_style_base_input" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@nbzqgs`}
                                                                    value = {setting.unreadHeight}
                                                                    onChange={v => {
                                                                        this.setState({ setting: Object.assign({},setting,{unreadHeight:v})});
                                                                    }}
                                                                />
                                                            </div>
                                                            <div style={{'margin-top':"5px"}}></div>
                                                            <span style={{'margin-right':'10px'}}>未读数边框:</span>
                                                            <span>无:</span>
                                                            <div className="lr_addCustomApplication_bgc_div_checkbox" >
                                                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@2hhj6b`}
                                                                    value={setting.isHasUnreadBorder}
                                                                    onChange={(value) => {
                                                                        if (value === "1") {
                                                                            this.setState({ setting: Object.assign({},setting,{isHasUnreadBorder:'1',unreadBorderWidth:'0',unreadBorderColor:''})})


                                                                        } else {
                                                                            this.setState({ setting: Object.assign({},setting,{isHasUnreadBorder:'0',unreadBorderWidth:'1',unreadBorderColor:'#ffffff'})})
                                                                        }
                                                                    }}
                                                                />
                                                            </div>
                                                            {
                                                                setting.isHasUnreadBorder == '0' ? (
                                                                    <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@udc2td`}>
                                                                        <span>边框大小:</span>
                                                                        <div className="lr_managerSetting_style_base_input">
                                                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@s4g4pd`}
                                                                                value = {setting.unreadBorderWidth}
                                                                                onChange={v => {
                                                                                    this.setState({ setting: Object.assign({},setting,{unreadBorderWidth:v})});
                                                                                }}
                                                                            />
                                                                        </div>
                                                                        <span style={{'margin-right':'10px'}}>边框颜色:</span>
                                                                        <div className="lr_managerSetting_style_base_colorPicker" >
                                                                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@equoma`}
                                                                                value={setting.unreadBorderColor}
                                                                                onChange={(v)=> { this.setState({ setting: Object.assign({},setting,{unreadBorderColor:v})})}}
                                                                            />
                                                                        </div>
                                                                    </React.Fragment>
                                                                ) : null
                                                            }



                                                        </WeaFormItem>

                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q4m551`} label="显示方式" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                                            <div style={{width:"100px"}}>
                                                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@1m7d7y`}
                                                                    options={showTypeOptions}
                                                                    value={setting.showType}
                                                                    onChange={v => {
                                                                        this.setState({ setting: Object.assign({},setting,{showType:v})});
                                                                    }}
                                                                />
                                                            </div>
                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@t1yx0p`} label="图标名称间距" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                                            <div className="lr_managerSetting_style_base_input2" >
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@q6u1pe`}
                                                                    value = {logoTextMargin}
                                                                    onChange = {(value)=>{this.setState({logoTextMargin:value})}}
                                                                />
                                                            </div>

                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ustcku`} label="颜色" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                                            <span>模块名称颜色:</span>
                                                            <div className="lr_managerSetting_style_base_colorPicker" >
                                                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@y9qzdo`}
                                                                    value={"#"+applicationFontColor}
                                                                    onChange={(v)=> {this.setState({applicationFontColor:(v+"").substring(1)})}}
                                                                />
                                                            </div>
                                                            <span>未读数颜色:</span>
                                                            <div className="lr_managerSetting_style_base_colorPicker" >
                                                                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@8a5gn4`}
                                                                    value={setting.unreadCountFontColor}
                                                                    onChange={(v)=> { this.setState({ setting: Object.assign({},setting,{unreadCountFontColor:v})})}}
                                                                />
                                                            </div>
                                                            <div style={{'margin-top':"5px"}}></div>
                                                            <span style={{'margin-right':'10px'}}>未读数背景颜色:</span>
                                                            <span>透明:</span>
                                                            <div className="lr_addCustomApplication_bgc_div_checkbox" >
                                                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@fu4m8k`}
                                                                    value={setting.isOpacityUnreadCountBgColor}
                                                                    onChange={(value) => {
                                                                        if (value === "1") {
                                                                            this.setState({ setting: Object.assign({},setting,{isOpacityUnreadCountBgColor:'1',unreadCountBgColor:''})})
                                                                        } else {
                                                                            this.setState({ setting: Object.assign({},setting,{isOpacityUnreadCountBgColor:'0',unreadCountBgColor:'#f50'})})
                                                                        }
                                                                    }}
                                                                />
                                                            </div>
                                                            {
                                                                setting.isOpacityUnreadCountBgColor == '0' ? (
                                                                    <div className="lr_managerSetting_style_base_colorPicker" >
                                                                        <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@77d5bf`}
                                                                            value={setting.unreadCountBgColor}
                                                                            onChange={(v)=> { this.setState({ setting: Object.assign({},setting,{unreadCountBgColor:v})})}}
                                                                        />
                                                                    </div>
                                                                ) : null
                                                            }

                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@bzf5p4`} label="背景图片" labelCol={{span: 6}} wrapperCol={{span: 18}}>
                                                            {
                                                                containerBgi ? (
                                                                    <div className="e9desktop-menu-add-img-edit">
                                                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@4lk4lo`} multiCheck={false} onChange={(value)=>{ this.setState({"containerBgi":value})}} type='button' >
                                                                            <img src={containerBgi } alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150, '更换图标')}/>
                                                                        </WeaMaterialLib>
                                                                        <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746, '删除图标')}>
                                                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@cgr7o8`} type="cross" onClick={() => this.setState({"containerBgi": ''})}/>
                                                                        </div>
                                                                    </div>
                                                                ) : (
                                                                    <div className="e9desktop-menu-add-img-add">
                                                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@qzixsq`} multiCheck={false} onChange={(value)=>{ this.setState({"containerBgi":value})}} type='button' >

                                                                            <div className="e9desktop-menu-add-img-add-icon" title={getLabel(387151, '添加图标')}>
                                                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@auf97j`} type="plus"/>
                                                                            </div>
                                                                        </WeaMaterialLib>
                                                                    </div>
                                                                )
                                                            }
                                                        </WeaFormItem>
                                                    </div>
                                                </WeaSearchGroup>
                                            </WeaNewScroll>
                                        </TabPane>:""
                                    }

                                    {
                                        this.props.container.isSystem == 1 ?<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@tbaz0r`} tab="布局" key="3">
                                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@9vlyyd`} height={396}>
                                                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@s4vzeq`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true} >
                                                    <div className="lr_managerSetting_style_base_div">
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wttimq`} label="组件大小" className="formItemMarginLeft" labelCol={{span: 6}} wrapperCol={{span: 18}}>
                                                            <div className="lr_managerSetting_style_base_select" >
                                                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2r4v4a`}
                                                                    options={componentSizeOptions}
                                                                    value={this.state.customApplicationSizeType+""}
                                                                    onChange={(v, showname)=> {
                                                                        if(v == 0){
                                                                            this.setState({
                                                                                customApplicationSizeType: v,
                                                                                width : 160,
                                                                                height : 160
                                                                            })
                                                                        }else if(v == 1){
                                                                            this.setState({
                                                                                customApplicationSizeType: v,
                                                                                width : 100,
                                                                                height : 100
                                                                            })
                                                                        }

                                                                    }}
                                                                />
                                                            </div>
                                                            {/*{*/}
                                                            {/*this.state.customApplicationSizeType==0?(<div className="lr_managerSetting_layout_base_widthheight" >*/}
                                                            {/*<span>宽度:</span>*/}
                                                            {/*<div className="lr_managerSetting_style_base_input" >*/}
                                                            {/*<WeaInputNumber*/}
                                                            {/*value = {this.state.width}*/}
                                                            {/*onChange = {(value)=>{this.setState({width:value})}}*/}
                                                            {/*/>*/}
                                                            {/*</div>*/}
                                                            {/*<span>高度:</span>*/}
                                                            {/*<div  className="lr_managerSetting_style_base_input" >*/}
                                                            {/*<WeaInputNumber*/}
                                                            {/*value = {this.state.height}*/}
                                                            {/*onChange = {(value)=>{this.setState({height:value})}}*/}
                                                            {/*/>*/}
                                                            {/*</div>*/}
                                                            {/*</div>):( <div className="lr_managerSetting_layout_base_widthheight" >*/}
                                                            {/*<span>宽度:</span>*/}
                                                            {/*<div className="lr_managerSetting_style_base_input" >*/}
                                                            {/*<WeaInputNumber*/}
                                                            {/*value = {this.state.customApplicationSize}*/}
                                                            {/*onChange = {(value)=>{this.setState({customApplicationSize:value})}}*/}
                                                            {/*/>*/}
                                                            {/*</div>*/}
                                                            {/**/}
                                                            {/*</div>)*/}
                                                            {/*}*/}

                                                            <div className="lr_managerSetting_layout_base_widthheight" >
                                                                <span>宽度:</span>
                                                                <div className="lr_managerSetting_style_base_input" >
                                                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ktgyzr`}
                                                                        value = {this.state.width}
                                                                        onChange = {(value)=>{this.setState({width:value})}}
                                                                    />
                                                                </div>
                                                                <span>高度:</span>
                                                                <div  className="lr_managerSetting_style_base_input" >
                                                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@s9r4q5`}
                                                                        value = {this.state.height}
                                                                        onChange = {(value)=>{this.setState({height:value})}}
                                                                    />
                                                                </div>
                                                            </div>
                                                            {/*   <WeaSelectGroup
                                                isMobx
                                                value={value}
                                                options={options}
                                                selectLinkageDatas={selectLinkageDatas}
                                                onChange={(value, rightKey) => {
                                                    if(value[1]){
                                                        this.setState({
                                                            customApplicationSizeType: value[0],
                                                            customApplicationSize: value[1] ? value[1][0] : ""

                                                        })
                                                    }else{
                                                        this.setState({
                                                            customApplicationSizeType: value[0],
                                                        })
                                                    }

                                                }}/>
                                            <WeaHelpfulTip
                                                style={{position:"relative",left:'280px',top:'-23px'}}
                                                width =  {196} //如果要自定义宽度，在这里设置
                                                title="例如：100*200，为宽度100px，高度200px，如果只有一个数值，默认宽度和高度都为此值"
                                            />*/}
                                                        </WeaFormItem>
                                                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@bo8jcf`} label="分页" className="formItemMarginLeft" labelCol={{span: 6}} wrapperCol={{span: 18}}>

                                                            <div className="lr_managerSetting_layout_base_page_div" >
                                                                <span>显示分页:</span>
                                                                <div className="lr_managerSetting_layout_base_page_checkbox_div">
                                                                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@2xkw81`}
                                                                        value={this.state.openPageHelper}
                                                                        onChange={(value) => {
                                                                            if(value ==="1"){
                                                                                this.setState({
                                                                                    openPageHelper:1,
                                                                                })
                                                                            }else{
                                                                                this.setState({
                                                                                    openPageHelper:0,
                                                                                })
                                                                            }
                                                                        }}
                                                                    />
                                                                </div>
                                                            </div>
                                                            {
                                                                this.state.openPageHelper==1?(<div className="lr_managerSetting_layout_base_widthheight" >
                                                                    <span>每页显示数:</span>
                                                                    <div className="lr_managerSetting_style_base_input" >
                                                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@j5read`}
                                                                            value = {this.state.pageSize}
                                                                            onChange = {(value)=>{this.setState({pageSize:value})}}
                                                                        />
                                                                    </div>
                                                                </div>):""
                                                            }


                                                            {/* <WeaSelectGroup
                                                isMobx
                                                value={value2}
                                                options={options2}
                                                selectLinkageDatas={selectLinkageDatas2}
                                                onChange={(value, rightKey) => {

                                                    this.setState({
                                                        openPageHelper:value[0],
                                                        pageSize:value[1]?value[1][0]:""
                                                    })}}/>
                                            {
                                                this.state.openPageHelper==1?<WeaHelpfulTip
                                                    style={{position: "relative", left: '280px', top: '-23px'}}
                                                    width={196} //如果要自定义宽度，在这里设置
                                                    title="开启分页后，每页显示的数量"
                                                />:""
                                            }*/}
                                                        </WeaFormItem>
                                                    </div>
                                                </WeaSearchGroup>
                                            </WeaNewScroll>
                                        </TabPane>:""
                                    }


                                </Tabs>

                            </Spin>
                            <div className="portal-esetting-confirm lr_managerSetting_option_buttons_div" >
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gobl41`} type="primary" onClick={() => {this.save(this.state.isAsynSystemSetting)}}>{getLabel(30986, '保存')}</Button>
                                {/*   <Button type="primary" style={{marginLeft: '10px'}} onClick={()=>{this.props.setStateData({
                            customApplicationSizeType:this.state.customApplicationSizeType,
                            customApplicationSize:this.state.customApplicationSize,
                            openPageHelper:this.state.openPageHelper,
                            pageSize:this.state.pageSize})}}>同布</Button>*/}
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1dyfg0`} type="ghost"  style={{marginLeft: '10px'}} onClick={this.handlerDialogCancle}>{getLabel(31129, '取消')}</Button>
                            </div>
                        </div>
                    ) : null
                }


            </WeaDialog>
        )
    }
}
export default ManagerSetting